<template>
	<view class="zcwj">
		<view class="head">
			<view class="status_bar" 
				:style="{
					width:system_info.system_info.windowWidth+'px',
					height:system_info.head.status_bar_height+'px',
				}">
			</view>
			<view class="head_content" 
				:style="{
					height:system_info.head.navigation_bar_height+'px',
					width:system_info.system_info.windowWidth+'px',
					paddingRight:system_info.system_info.windowWidth - system_info.menu_button.left + 'px',				
				}">
				<view class="return_bt">
					<Page_return color="#fff"></Page_return>
				</view>
				<view class="centre">
					政策文件
				</view>
			</view>
		</view>
		<view class="content">
			
			<view class="content_filter">
				<u-search placeholder="请输入关键字" v-model="keyword" bg-color='#fff' border-color='#828282' @search="searchFile" @custom="searchFile"></u-search>
				<u-button size='mini' @click='getCollectionFile'><u-icon name='star-fill' :color="isCollection ? '#ffb82a' :'#f2f2f2'"></u-icon>我的收藏</u-button>
			</view>
			<view class="content_tab">
				<Wzg_tabs :tab_list="tabs" @change="changeIndex"></Wzg_tabs>
			</view>
			
			<scroll-view
				:style="{
					boxSizing: 'border-box',
					width:'100vw',
					paddingTop:'5px',
					height:system_info.system_info.windowHeight - system_info.head.height - 80+'px',
				}"
				scroll-y="true" 
				:lower-threshold = "10"
				@scrolltolower = "to_bottom">
				<view class="wt_item" v-for="(item,index) in data_list" :key="index">
					<zcwj_item :fileData = "item" @changeCollection="getCollection"></zcwj_item>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import {_get_system_info} from "@/my_tools/tools.js"  
import Page_return from "@/components/my_components/my_bt/page_return.vue" 
import Wzg_tabs from "@/components/my_components/public_cp/wzg_tabs.vue"  
import zcwj_item from "@/components/my_components/zcwj_cp/zcwj_item.vue"
export default {   //政策文件页面
	components:{Page_return,Wzg_tabs,zcwj_item},
	data() { 
		return { 
			system_info:null,
			tabs:["全部","省级","市级","区级","其他"],
			current: 0,
			data_list:[],
			page:1,
			size:15,
			level:'',
			keyword:'',
			isCollection:false,
		};
	},
	onPullDownRefresh() {
		this.data_list = []
		this.keyword = ''
		this.page = 1
		this.isCollection = false
		this.get_data()
	},
	onLoad(data){
		if(data.isCollection){
			this.isCollection = data.isCollection
		}
	},
	methods:{
		searchFile(){
			this.page = 1
			this.data_list = []
			this.get_data()
		},
		changeIndex(index) { //当tabs被点击时
			if(index != 0){
				this.level = this.tabs[index]
			}else{
				this.level = ''
			}
			this.page = 1
			this.data_list = []
			this.get_data()
			
		},
		getCollection(){
			
		},
		get_data(){  //参数 页数 ，页数大小
			uni.showLoading({
				title: '加载中'
			});
			let data ={
				page:this.page,
				size:this.size,
				level:this.level,
			}
			if(this.keyword){
				data.name = this.keyword
			}
			let url = this.isCollection ? '/wx/shrine' : '/policy/list'
			this.$ajax({
			    url: url,   //获取问题列表
				method:'GET',
			    data: data,
			    success: (res) => {
					let data = res.data;
					if(data.data.list.length>0){
						this.data_list.push.apply(this.data_list, data.data.list);
					}
			    },
				complete:()=>{
					this.loading = false;
					uni.hideLoading();
					uni.stopPullDownRefresh()
				},
			});
		},
		to_bottom(){  //滚动区域滚动到底部时
			++this.page
			this.get_data();
		},
		getCollectionFile(){
			this.data_list = []
			this.page = 1
			this.isCollection = !this.isCollection
			this.get_data()
		},
	},
	mounted(){
		this.system_info = _get_system_info(uni);
		this.get_data();
	},
}
</script>

<style lang="scss" scoped>
.zcwj{
	width: 100vw;
	min-height: 100vh;
	@include flex_layout_column;
	justify-content:flex-start;
	align-items: flex-start;
	.head{
		width: 100vw;
		background-color: #5c77ff;
		height:fit-content;
		>div{
			width: 100vw;
		}
		.head_content{
			padding-left:5px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.return_bt{
				margin-right: 5px;
			}
			.centre{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 15px;
				color: #fff;
			}
		}
	}
	.content{
		width: 100vw;
		.content_filter{
			@include flex_layout_row;
			justify-content: space-between;
			align-items: center;
			padding: 10px 15px 10px;
			background-color: #ffffff;
			height:40px;
		
		}
		.content_tab{
			background-color: #FFFFFF;
			height:40px;
			border-bottom: 1px solid #f0f0f0;
			box-sizing: border-box;
		}
	}
}
</style>
